<template>
  <div id="map-100" ref="containerRef" class="map-100" style="height: 500px;z-index:99999;"></div>
</template>

<script>
var markerLayer, circle
export default {
  name: 'TMap',
  props:{
    distance:{
        type: Number,
        default: 300
    }
  },
  data() {
    return {
      map: null,
      shopInfo: {}
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    handleMap(e) {
      console.log(e)
    },
    initMap() {
      let _this = this
      // 定义地图中心点坐标
      var center = new TMap.LatLng(39.984120, 116.307484)
      // 定义map变量，调用 TMap.Map() 构造函数创建地图
      _this.map = new TMap.Map('map-100', {

      })
      _this.map.on('click', function (event) {
        try{
          circle.remove([_this.shopInfo.lat])
        }catch (e) {

        }
        // 获取点击后的地图坐标并设置Marker
        _this.shopInfo.lng = event.latLng.lng
        _this.shopInfo.lat = event.latLng.lat
        if (markerLayer) {
          markerLayer.setGeometries([])
        }
        markerLayer = new TMap.MultiMarker({
          map: _this.map,
          styles: {
            // 点标记样式
            marker: new TMap.MarkerStyle({
              // width: 20, // 样式宽
              // height: 30, // 样式高
              // anchor: { x: 0, y: 0 }, // 描点位置
              src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png' // 标记路径
            })
          }
        })
        // markerLayer.add({ position: event.latLng })
        markerLayer.add({
          id: _this.shopInfo.lat,
          position: new TMap.LatLng(_this.shopInfo.lat, _this.shopInfo.lng)
        })
        circle = new TMap.MultiCircle({
          map: _this.map,
          id: _this.shopInfo.lat,
          styles: { // 设置圆形样式
            'circle': new TMap.CircleStyle({
              'color': 'rgba(41,91,255,0.16)',
              'showBorder': true,
              'borderColor': 'rgba(41,91,255,1)',
              'borderWidth': 2,
            }),
          },

        })
        circle.add({
          id: _this.shopInfo.lat,
          styleId: 'circle',
          center: new TMap.LatLng(_this.shopInfo.lat, _this.shopInfo.lng),
          radius: _this.distance*1,

        })
      })
    },
  }
}
</script>

<style scoped>
.map-100{
  border: hidden;
  box-sizing: border-box;
  text-align: left;
  /*overflow: hidden;*/
}
</style>